<template>
  <ul
    class="flex flex-col py-4 px-2.5 gap-3 h-screen"
    :class="[os, { 'bg-(--block-color)': $fa.isDark }]"
  >
    <li
      v-for="v in list"
      :key="v.path"
      :class="{ active: $route.path === v.path, 'mt-auto': v.path === 'theme' }"
      @click="click(v.path)"
    >
      <template v-if="v.path === '/user-page'">
        <Image
          v-if="user.isLogin"
          :src="v.icon"
          class="rounded-full!"
          prevent
        />
        <img v-else class="w-9 h-9 rounded-full" :src="v.icon" />
      </template>
      <i
        v-else
        :class="[$route.path === v.path ? 'fa-solid' : 'fa-light', v.icon]"
      ></i>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { type as osType } from '@tauri-apps/plugin-os';
import { useUserStore, useSettingsStore } from '@/store';
import router from '@/router';
import Image from './Image.vue';

const user = useUserStore();
const settings = useSettingsStore();
const os = osType();

const list = computed(() => [
  { path: '/user-page', icon: user.getAvatar },
  { path: '/', icon: 'fa-magnifying-glass' },
  { path: '/history-page', icon: 'fa-clock' },
  { path: '/down-page', icon: 'fa-download' },
  { path: 'theme', icon: 'fa-solid fa-moon-over-sun' },
  { path: '/settings-page', icon: 'fa-gear' },
  { path: '/info-page', icon: 'fa-circle-info' },
]);

function setTheme() {
  settings.theme = settings.isDark ? 'light' : 'dark';
}

function click(path: string) {
  if (path === 'theme') return setTheme();
  if (document.querySelector('.page')?.classList.contains('hide')) {
    return;
  }
  router.push(path);
}
</script>

<style scoped>
@reference 'tailwindcss';

li {
  @apply relative flex items-center justify-center flex-col w-9 h-9;
  @apply text-(--desc-color) transition-colors text-xl cursor-pointer;
  &:hover,
  &.active {
    @apply text-(--primary-color);
  }
}
ul.macos {
  @apply pt-[36px] bg-[unset]!;
}
</style>
